/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: index2
*
* date: 2025/9/12
*/
<template>
  <div class="root">
    <div class="left_box"></div>
    <div class="center_box">
      <div class="canvas_box">
        <canvas id="myCanvas" width="1600" height="900" ref="myCanvas"></canvas>
      </div>
    </div>
    <div class="right_box"></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const myCanvas = ref()
let bg = new URL('../assets/images/photo/拼图1.png', import.meta.url).href
let offscreenCanvasExample = null
let imgBox2 = [
  {
    src: new URL('../assets/images/photo/1.png', import.meta.url).href,
    x: 13,
    y: 261,
    pointX: 10,
    pointy: 0,
    canvasDom: null
  },
  {
    src: new URL('../assets/images/photo/2.png', import.meta.url).href,
    x: 2,
    y: 408,
    pointX: 10,
    pointy: 225,
    canvasDom: null
  },
  {
    src: new URL('../assets/images/photo/3.png', import.meta.url).href,
    x: 0,
    y: 562,
    pointX: 10,
    pointy: 520,
    canvasDom: null
  },
  {
    src: new URL('../assets/images/photo/4.png', import.meta.url).href,
    x: 176,
    y: 166,
    pointX: 10,
    pointy: 775,
    canvasDom: null
  }
]
let aHeight = 150
let ctx = null

// 创建离屏canvas
async function offscreenCanvas() {
  return new Promise((resolve) => {
    if (offscreenCanvasExample) {
      resolve(offscreenCanvasExample)
    } else {
      offscreenCanvasExample = document.createElement('canvas');
      offscreenCanvasExample.width = 667;
      offscreenCanvasExample.height = 897;
      const offscreenCtx = offscreenCanvasExample.getContext('2d');
      let img = new Image();
      img.src = bg;
      img.onload = function () {
        offscreenCtx.drawImage(img, 0, 0);
        resolve(offscreenCanvasExample)
      }
    }
  })
}

// 初始化canvas
async function initCanvas() {
  let flagX = 480
  ctx = myCanvas.value.getContext('2d');
  ctx.save()
  let offscreenExample = await offscreenCanvas()
  ctx.drawImage(offscreenExample, 0, 0, offscreenExample.width, offscreenExample.height, flagX, 0, offscreenExample.width, offscreenExample.height)
  for (let i = 0; i < imgBox2.length; i++) {
    const img = new Image();
    img.src = imgBox2[i].src;
    img.onload = function () {
      imgBox2[i].canvasDom = document.createElement('canvas');
      imgBox2[i].canvasDom.width = this.naturalWidth;
      imgBox2[i].canvasDom.height = this.naturalHeight;
      const offscreenCtx = imgBox2[i].canvasDom.getContext('2d');
      offscreenCtx.drawImage(this, 0, 0);
      createImage(imgBox2[i])
    }
  }
}

// 创建图片
function createImage(item, animate = false) {
  if (animate) {
    ctx.drawImage(item.canvasDom, item.startX, item.startY);
  } else {
    let calcWidth = Math.floor((item.canvasDom.width * aHeight / item.canvasDom.height))
    ctx.drawImage(item.canvasDom, item.pointX, item.pointy, calcWidth, 150);
  }
}

// 动画
function moveAnimate(item) {
  let startTime = null;
  const duration = 4000; // 3秒
  function animate(currentTime) {
    if (!startTime) {
      startTime = currentTime;
    }
    ctx.clearRect(0, 0, 1600, 900)
    ctx.save()
    ctx.drawImage(offscreenCanvasExample, 0, 0, offscreenCanvasExample.width, offscreenCanvasExample.height, 480, 0, offscreenCanvasExample.width, offscreenCanvasExample.height)
    ctx.translate(480 + 90, 74)
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    // 更新 item 的位置
    item.startX = item.startX + (item.targetX - item.startX) * progress;
    item.startY = item.startX + (item.targetY - item.startX) * progress;
    // 绘制
    createImage(item, true);
    if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      console.log('动画完成！', item);
    }
    ctx.restore()
  }

  // 开始动画
  requestAnimationFrame(animate);
}

onMounted(() => {
  initCanvas()
  setTimeout(() => {
    imgBox2[0].startX = imgBox2[0].pointX
    imgBox2[0].startY = imgBox2[0].pointy
    imgBox2[0].targetX = imgBox2[0].x
    imgBox2[0].targetY = imgBox2[0].y
    moveAnimate(imgBox2[0]);
  }, 3000)
})
</script>

<style scoped lang="less">
.root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/images/bg/bg.png");
  background-repeat: no-repeat;
  background-size: cover;

  .left_box {
    width: calc((100% - 1600px) / 2);
    height: 100%;
  }

  .center_box {
    width: 1600px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
    position: relative;

    .img_a {
      position: absolute;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        scale: 0.4;
      }

      &.img1 {
        top: 100px;
        left: 50px;
      }

      &.img2 {
        top: 300px;
        left: 50px;
      }

      &.img3 {
        top: 600px;
        left: 50px;
      }

      &.img4 {
        top: 800px;
        left: 50px;
      }

      &.img5 {
        top: 100px;
        right: 50px;
      }

      &.img6 {
        top: 250px;
        right: 50px;
      }

      &.img7 {
        top: 450px;
        right: 50px;
      }

      &.img8 {
        top: 600px;
        right: 50px;
      }

      &.img9 {
        top: 800px;
        right: 50px;
      }
    }


    .canvas_box {
      width: 1600px;
      height: 900px;
      position: relative;
      //background-image: url("@/assets/images/photo/拼图1.png");

      #myCanvas {
        //width: 667px;
        //height: 897px;
        width: 1600px;
        height: 900px;
        //background-image: url("@/assets/images/photo/拼图.png");
        position: absolute;
        //top: 73px;
        //left: 91px;

        .img_b {
          position: absolute;
          width: 200px;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;

          &.img1 {
            top: 100px;
            left: 50px;
          }

          &.img2 {
            top: 300px;
            left: 50px;
          }

          &.img3 {
            top: 600px;
            left: 50px;
          }

          &.img4 {
            top: 800px;
            left: 50px;
          }

          &.img5 {
            top: 100px;
            right: 50px;
          }

          &.img6 {
            top: 250px;
            right: 50px;
          }

          &.img7 {
            top: 450px;
            right: 50px;
          }

          &.img8 {
            top: 600px;
            right: 50px;
          }

          &.img9 {
            bottom: 0px;
            right: 0px;
          }
        }
      }
    }
  }

  .right_box {
    width: calc((100% - 1000px) / 2);
    height: 100%;
  }
}
</style>
